<template>
  <div class="datacolor">
    <div class="data_tit">
      <p class="tit14" style="color: #000">日期颜色</p>
      <input class="data_color" type="color" v-model="datatool.fill" />
    </div>
    <div class="picture_div1" style="padding-top: 0px">
      <div class="picture_range">
        <p class="picture_range_tit">不透明度</p>
        <div class="">{{ rangeV + "%" }}</div>
      </div>
      <input
        type="range"
        min="0"
        max="1"
        step="0.01"
        ref="range"
        @input="rangeInput()"
        :style="{ backgroundSize: rangeCSS }"
        v-model.number="datatool.opacity"
        @mousedown="rangeInputdragstart"
        @mouseup="rangeInputdragend"
      />
      <div class="picture_tool">
        <div
          class="picture_tools"
          v-for="(v, i) in pictureTool"
          :key="i"
          :style="{ background: v.select ? ' #d4d4d4' : '#fff' }"
          @click="picturetoolsClick(i)"
        >
          <el-tooltip
            class="item"
            popper-class="tooltip"
            effect="dark"
            :content="v.text"
            placement="bottom"
          >
            <img :src="v.img" alt="" />
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from "@/utils/mixin";
import { mapState } from "vuex";

export default {
  mixins: [mixin],
  data() {
    return {
      //锁&删除
      pictureTool: [
        { img: require("@/assets/img/key.png"), select: false, text: "上锁" },
        { img: require("@/assets/img/del.png"), select: false, text: "删除" },
      ],
      datalist: null,
      //滑动条
      rangeV: "",
      rangeCSS: "",
     
    };
  },
  computed: {
    ...mapState("templateStage", [
      "modifyele",
      "datatool",
      "listEllipse",
      "listNote",
      "listImg",
      "historylist",
    ]),
  },
  watch: {
    "datatool.fill": {
      handler(newVal, oldVal) {
        if (this.historylist.length == 0)
          this.$emit("childhistory", "fill", oldVal, this.modifyele);
        this.rangeInputdragend();
      },
    },
  },
  methods: {
    rangeInputdragstart() {
      if (this.historylist.length == 0) this.$emit("deductchild");
    },
    rangeInputdragend() {
      this.$emit("deductchild");
    },
    //滑动条-滑动
    rangeInput() {
      let { opacity } = this.datatool;
      opacity = opacity * 100;
      this.rangeCSS = opacity + "% 100%";
      this.rangeV = parseInt(opacity);
    },
    picturetoolsClick(i) {
      if (this.historylist.length == 0) this.$emit("deductchild");
      let { select } = this.pictureTool[i];
      this.pictureTool[i].select = !select;
      if (i == 0) {
        if (this.pictureTool[i].select) {
          this.$emit("nonechild");
          this.$store.commit("templateStage/TEXTADDKEYELE", this.modifyele);
          this.$emit("loadele", this.modifyele);
          this.$emit("addtrans", this.modifyele);
        } else {
          this.$store.commit("templateStage/TEXTDELKEYELE", this.modifyele);
          this.$emit("loadele", this.modifyele);
          this.$emit("addtrans", this.modifyele);
        }
      } else if (i == 1) {
        if (this.pictureTool[i].select) {
          this.listNote.forEach((v, index) => {
            if (v.config.name == this.modifyele) {
              this.$store.commit("templateStage/TEXTDELLISTIMG", index);
              this.$emit("delchild", false);
            }
          });
        }
      }
      this.$emit("deductchild");
    },
    draggabletool() {
      if (this.datatool.draggable == false) this.pictureTool[0].select = true;
      else this.pictureTool[0].select = false;
    },
  },
  created() {
    this.rangeInput();
    this.draggabletool();
  },
  beforeUpdate() {
    this.rangeInput();
    this.draggabletool();
  },
};
</script>
<style lang="less" scoped>
@import "../../assets/styles/frame.less";
.picture_range_tit {
  font-size: 14px;
}
.data_tit {
  padding: 0 20px;
  & > p {
    font-size: 16px;
  }
  .data_color {
    .inputColor();
    margin-top: 12px;
    margin-bottom: 0;
  }
}
.opaque();
.picturebox_list {
  width: 100%;
  padding: @padding1;
  padding-top: 16px;
  margin-top: 14px;
  border-top: 1px solid #e0e0e0;
  .divDFJS();
  .list {
    width: 41%;
    margin-bottom: 14px;
    .divDSA();
    .picturebox_div {
      width: 48px;
      height: 26px;
      .bot();
      .cen();
    }
  }
}
.picture_tools {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  .cen();
}
</style>